<script setup>
import {ref} from "vue";
import {get} from "../../util/request.js";
import {showToast} from "vant";

const onClickLeft = () => {
  history.back()
}//导航栏返回上一个页面

const store = ref([
  {
    name: "大明店",
    address: "广东省广州市天河区天河路",
    phone: "020-12345678",
    time: "8:00-20:00",
  }
])

const name = ref()

const onSearch = () => {
  get("store/list",{name:name.value}).then(res => {
    if (res.code === 0){
      store.value = res.data
    } else {
      showToast(res.data)
    }
  })
}
onSearch()



</script>

<template>
  <div style="position: relative;width: 100vw;height: 100vh;">
    <van-nav-bar
        style="
          position:fixed;
          top: 0;
          width: 100%"
        title="附近门店"
        left-text="返回"
        left-arrow
        fixed
        :border="false"
        @click-left="onClickLeft"
    />

    <div style="width: 100%; margin-top: 100px">
      <div style="width: 95%;
      height:120px;
      position:relative;
      left: 2.5%;
      border: 1px solid rgba(0,0,0,0.1);
      margin-top: 10px;"
           v-for="item in store">
        <div style="width: 100%;">
          <van-row justify="space-around" style="text-align: left;margin-top: 10px">
            <van-col span="18">{{item.name}}</van-col  >
            <van-col span="4" style="font-size: 10px;text-align: right">{{"距您" + 5.5 + "km"}}</van-col>
          </van-row>
          <van-row justify="space-around" style="text-align: left;font-size: 10px;margin-top: 5px">
            <van-col span="12">
              营业时间：{{item.time}}<br>
              门店电话：{{item.phone}}<br>
              {{item.address}}
            </van-col>
            <van-col offset="1" span="3" style="font-size: 10px">
              <van-icon name="qr" size="28px" style="margin-left: 10%"/>
              <br>福利群
            </van-col>
            <van-col offset="1" span="2" style="font-size: 10px">
              <van-icon name="phone-o" size="28px"/>
              <br>电话
            </van-col>
            <van-col offset="1" span="2" style="font-size: 10px">
              <van-icon name="guide-o" size="28px"/>
              <br>导航
            </van-col>
          </van-row>
        </div>
      </div>
    </div>

    <div style="
          position:fixed;
          top: 46px;
          width: 100%;
          margin-top: -10px;
          ">
      <van-search
          style="
          background-color: #ffffff;
            "
          :focus="true"
          v-model="name"
          placeholder="搜索"
          @search="onSearch"
          background="rgba(255,255,255,0.63)"
      />
      <div style="margin-top: -15px;">
        <van-divider />
      </div>
    </div>

  </div>
</template>

<style scoped>

</style>